﻿@using RuoVea.ExConfig
@{
    var host = Appsettings.app("BaseFile:HostUrl");
    Layout = "";
}
<!DOCTYPE html>
<html charset="utf-8">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>横道图 - 专注网站开发与技巧,关注用户体验</title>
</head>

<body>
    <div style="width:100%;height:100%">
        <div id="app" v-if="!destroy">
            <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
                <gantt-header slot="header"></gantt-header>
                @*<gantt-footer slot="footer"></gantt-footer>*@
            </gantt-elastic>
        </div>
    </div>
    <script src="@host/js/vue.js"></script>
    <script src="@host/js/day.js"></script>
    <script src="@host/js/GanttElastic.umd.js"></script>
    <script src="@host/js/Header.umd.js"></script>
    <script src="@host/utils.js"></script>
    <script src="@host/res//layui/layui.all.js"></script>
    <script>
        const add=function(id) {  if(id===null||id===undefined||id===''){ 
            layui.layer.open({ type: 2,area: ['450px', '650px'], shade: 0.2,shadeClose: true,fixed: false,maxmin: false,content: '@host/Task/TasksView',title:"添加",end:function(){
            location.reload();
            }});
        } else{ 
            layui.layer.open({ type: 2,area: ['450px', '650px'], shade: 0.2,  fixed: false,maxmin: false,content: '@host/Task/TasksView?id='+id,title:"编辑",end:function(){
            location.reload();
            }});
        } };
        let options = {
               taskMapping: { progress: "percent" },
               maxRows: 100,
               maxHeight: 1400,
               title:{label: "任务视角",html: false},
               scope: {before: 3,after: 5,},
               row: {height: 14,width:12},
               times:{timesScale:60*1000,timeZoom:21,/* 时间的缩放，值越大压缩越紧奏 */},
               base:{fill:"blue",stroke:"blue"},
               chart: { progress: {bar: false},text: { offset: 0,/* xPadding: 10, */ display: true },expander: { type: 'chart', display: true,   displayIfTaskListHidden: true,   offset: 4, } },
               locale: {name: "ch",Now: "当前时间","X-Scale": "缩放宽度","Zoom-X": "缩放宽度","Y-Scale": "高","Task list width": "宽1","Before/After": "时间跨度","Display task list": "显示列头",weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月",],},
               calendar: {workingDays: [1, 2, 3, 4, 5],/* 每周工作时间 */gap: 0,/* 与上方距离 */strokeWidth: 5,/* 下方距离 */hour: {display: false /* 小时是否出现 */},},
               taskList: {
                   expander: {straight: false},
                   columns: [
                       {id: 10,label: "ID",value: "id",width: 50},
                       {id: 15,label: "状态",width: 50,value:task=>{return "<a style=\"background-color:"+task.StartColor+";padding:2px 5px;color:#fff;border-radius:5px;\">"+task.StartName+"</a>"},html:true},
                       {id: 20,label: "任务名称",value: "label",width: 200,expander: true,html: false,events: {click ({ data, column }) { add(data.id);}}},
                       //{id: 3,label: "人员",value: "user",width: 130,html: true},
                       {id: 40,label: "开始日期",value: task => dayjs(task.start).format("YYYY-MM-DD"),width: 85,canSort:true},
                       {id: 50,label: "结束日期",value: task => dayjs(task.end).format("YYYY-MM-DD"),width: 85},
                        //{id: 6,label: "类型",value: "type",width: 68},
                       {id: 65,label: "优先级",width: 60,value:task=>{return "<a style=\"background-color:"+task.PriorityColor+";padding:5px 10px;color:#fff;border-radius:10px;\">"+task.PriorityName+"</a>"},html:true },
                       {id: 70,label: "进度",value: "progress",width: 50,style: {"task-list-header-label": {"text-align": "center",width: "100%"},"task-list-item-value-container": {"text-align": "center",width: "100%"}}}
                   ]}
               };
        const app = new Vue({
            el: '#app',
            components: {
                'gantt-header': Header,
                'gantt-elastic': GanttElastic,
                'gantt-footer': {template: `<span>this is a footer</span>`,},
            },
            data: {
                tasks: @Html.Raw(ViewBag.data),
                options:options,
                dynamicStyle: {'task-list-header-label': {'font-weight': 'bold',},},destroy: false,
            }
        });
        let ganttState, ganttInstance;
        app.$on('gantt-elastic-ready', (ganttElasticInstance) => {
               ganttInstance = ganttElasticInstance;
               ganttInstance.$on('tasks-changed', (tasks) => {
                   console.log(12)
                   //app.tasks = tasks;
               });
               ganttInstance.$on('options-changed', (options) => {
                   app.options = options;
                   //console.log('options changed', { options });
               });
               ganttInstance.$on('dynamic-style-changed', (style) => {
                   app.dynamicStyle = style;
               });
               ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
                   console.log('task mouse enter', { data, event });
               });
               ganttInstance.$on('updated', () => {
                   //console.log('gantt view was updated');
               });
               ganttInstance.$on('destroyed', () => {
                   //console.log('gantt was destroyed');
               });
               ganttInstance.$on('times-timeZoom-updated', (zoom) => {
                   console.log('time zoom changed');
                   //console.log('zoom changed', { zoom });
               });
               ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
                   console.log('task list clicked! (task)', { data, column });
               });
               });
        app.$mount('#app');

        layui.$(".gantt-elastic__header-options .add").bind("click",function(e){
           add('');
        });
    </script>
</body>

</html>